<template>
	<view>
		<view class="my_order" :style="{paddingTop: vuex_custom_bar_height+ 'px'}">
			<tn-nav-bar  :alpha="true">活动管理</tn-nav-bar>
			
			<!-- 顶部标签 -->
		    <tn-tabs-swiper ref="tabs"  activeColor="#FF6708" inactiveColor="#080808" :list="list" :current="tabsIndex" :isScroll="false" @change="tabsChange"></tn-tabs-swiper>
			
			<!-- 标签内容 -->
			<swiper class="swiper__box"   :current="swiperIndex" @transition="swiperTransition" @animationfinish="swiperAnimationFinish">
				<swiper-item class="swiper__item" v-for="(t,i) in list" :key="i">
					<scroll-view
					  class="list-scroll-content"
					  :scroll-y="true"
					  @scrolltolower="getMoreOrderList"
					>
					  <view
					    v-for="(item, index) in orderList"
					    :key="index"
					    class="rf-order-item"
					  >
					    <view class="i-top">
					      <text class="in1line">发布于:{{ item.created_at|parseTime }} </text>
					      <text class="state">{{ orderStatusFilter(item.status) }}</text>
					    </view>
						<view class="i-content">
							<image style="width: 20%;height: auto; " mode="aspectFit" :src="item.pic"></image>
							<view class="rt">
								<view class="info">
									<view class="title">{{item.title}}</view>
<!-- 									<view class="topic" style="color: #666;font-size: 12px;" v-if="item.mentor.topic.name">{{item.mentor.topic.name}}</view> -->
								</view>
								<view class="ft">
									<view class="price">￥{{item.price}}</view>
<!-- 									<view class="number"> 人数:{{item.order_number}}</view> -->
<!-- 									<view class="times" v-if="item.type == 1"> 时间段:{{getTimesCount(item.times)}}</view> -->
								</view>
								
							</view>
						</view>
					
					   <view class="price-box">
					      
					      <view class="total">
					        
					        <text class="price">导师报名： {{ item.mentor_entry_num }}/{{ item.mentor_num }}</text>
					      </view>
					      <view class="amount">
					        <text class="price font-weight-500" ><text class="font-sm">用户报名： </text>{{ item.user_entry_num }}/{{ item.user_num }}</text>
					      </view>
					    </view>
					    <view class="action-box">
					     

					      <button
					        class="action-btn "
					        @tap="toUpdate(item.id)"
					      >
					        修改
					      </button>
						  
						  <button
							v-if="item.status == 0"
						    class="action-btn "
						    @tap="updateStatus(item)"
						  >
						    上架
						  </button>
						  <button v-else
						    class="action-btn "
						    @tap="updateStatus(item)"
						  >
						    下架
						  </button>
		
					    </view>
					  </view>
					  
					  <view class="empty__item" v-if="orderList.length < 1 && !loading" style="margin-top: 200px;">
					    <tn-empty mode="search"></tn-empty>
					  </view>
					  
					  <view style="margin-top: 16px;">
						  <tn-load-more v-if="orderList.length > 1"  :status="loadStatus" :fontSize="24" ></tn-load-more>
					  </view>
					  
					  
					</scroll-view>
				</swiper-item>
			</swiper>
			
			<TemplateLoading :active="loading"></TemplateLoading>
		</view>
	</view>
</template>

<script>
	import TemplateLoading from '../../components/loading.vue'
	import {centerList, updateStatus as updateObject} from '@/api/activity/index.js'
	
	export default {
		components:{TemplateLoading},
		
		data() {
			return {
				loading:false,
				list: [{
					name: '全部',
					status:""
				  },
				
				  {
					name: '正常',
					status:1
				  },
				  {
				  		name: '已过期',
				  		status:2
				  },
				  {
					name: '已下架',
					status:0
				  }
				],
				loadStatus:"loadmore",
				tabsIndex: 0,
				swiperIndex: 0,
				orderList:[],
				total:0,
				selectParam:{
					status:"",
					page:1,
					size:8,
				}
			}
		},
		onLoad() {
		},
		onShow() {
			this.selectParam.page = 1
			this.orderList = []
			
			this.initData()
		},
		methods: {
			toUpdate(id){
				uni.navigateTo({
				  url: '/pages/user/activity/addActivity?id='+id
				})
			},
			updateStatus(item){
				var _param = {
					id:item.id,
					status:item.status == 0 ? 1:0
				}
				this.loading = true
				updateObject(_param).then(res=>{
					this.loading = false
					uni.showToast({
						icon:'none',
						title:'操作成功',
						duration:2000
					})
					
					this.orderList = []
					this.selectParam.page= 1
					this.initData()
				})
			},
			// 标签栏值发生改变
			  tabsChange(index) {
				this.swiperIndex = index
				this.tabsIndex = index
				
				this.selectParam.status = this.list[index].status
				this.selectParam.page = 1
				this.total = 0
				this.orderList = []
				
				this.loading = true
				this.initData()
			  },
			  // swiper-item位置发生改变
			  swiperTransition(event) {
				this.$refs.tabs.setDx(event.detail.dx)
			  },
			  // swiper动画结束
			  swiperAnimationFinish(event) {
				const current = event.detail.current
				this.$refs.tabs.setFinishCurrent(current)
				if(this.swiperIndex != current){
					this.tabsChange(current)
				}
				
			  },
			  
			  initData(){
				  this.loading = true
				 centerList(this.selectParam).then(res=>{
					 this.loading = false
					 this.orderList = [...this.orderList, ...res.data]
					 
					 if(res.data.length < this.selectParam.size || this.orderList.length == this.total){
						this.loadStatus = "nomore"
					 }else{
						this.loadStatus = "loadmore" 
					 }
					
					this.total = res.total
				 }, err=>{
					 this.loading = false
				 }) 
			  },
			  getMoreOrderList(){
				  if(this.loadStatus == "nomore" || this.orderList.length == 0 ) return;
				  
				  this.selectParam.page++
				  
				  this.loadStatus="loading"
				  this.initData()
			  },
			  orderStatusFilter(order_status){
				  return order_status == 0 ?"下架":(order_status == 2 ?"已过期":"正常"); 
			  },
		}
	}
</script>

<style lang="scss" scoped>
  .my_order{
	  background: $tn-main-bg;
	  height: 100vh;
	  padding-left: 6%;
	  padding-right: 6%;
  }
  
  .tn-radius10{border-radius: 10rpx;}
  
  .swiper__box,.list-scroll-content {
	//min-height: 500px;
	height: calc(100vh - (300rpx + env(safe-area-inset-bottom) / 2))
  }

  
  .rf-order-item{
	  background: #fff;
	  border-radius: 10rpx;
	  padding: 24rpx 20rpx;
	  margin-top: 16px;
	  font-size: 12px;
	  
	  .i-top{
		  display: flex;
		  justify-content: space-between;
		  border-bottom: 1px solid #e8e8e8;
		  padding-bottom: 8px;
	  }
	  .i-content{
		  display: flex;
		  margin: 9px 0;
		  color: #333;
		  
		  .rt{
			  width: 80%;
			 display: flex; 
			 justify-content: space-between;
			 padding-left: 12px;
		  }
		  
		  .info {font-size: 14px;}
		  .ft{
			color: #8e8e8e;
			text-align: right;
			.price{
				color: #8e8e8e;
			}
		  }
	  }
	  
	  .price-box{
		 display: flex;
		 justify-content: space-between; 
		 margin-bottom: 8px;
		 .total{color: #8e8e8e;}
		 
	  }
	  
	  .action-box{
		  text-align: right;
		  .action-btn{
			  background: $tn-main-orange;
			  color: #fff;
			  line-height: 26px;
			  height: 26px;
			  padding: 0 16rpx;
			  font-size: 12px;
			  width: 22%;
			  margin-left: 8px;
			  display: inline-block;
		  }
		  
		  .cacel-btn{
			  background: #fff;
			  color: #000;
			  border: 1px solid #333;
		  }
	  }
  }


</style>
